<template>
  <div>
    <!-- 创建/加入 -->
    <el-dialog top="30vh" :title="$t('add.add194')" :visible.sync="dialogShow" width="600px" :close-on-click-modal="false">
      <div class="type_inner">
        <div class="item">
          <span>{{ $t('add.add195') }}</span>
          <el-button
            style="width: 110px"
            round
            type="primary"
            :size="optionButtonSize"
            @click="joinHandle"
            >{{ $t('add.add196') }}</el-button
          >
        </div>

        <div class="item">
          <span>{{ $t('add.add197') }}</span>
          <el-button
            style="width: 110px"
            round
            type="primary"
            :size="optionButtonSize"
            @click="createHandle"
            >{{ $t('add.add198') }}</el-button
          >
        </div>
      </div>
    </el-dialog>
    <OrganizationJoin ref="OrganizationJoin" @getList="getList" />
  </div>
</template>

<script>
import OrganizationJoin from '@/components/join/index'; //

export default {
  name: 'BLZMasterIndex',
  components: {
    OrganizationJoin,
  },
  data() {
    return {
      dialogShow: false,
      tableData: [],
      user_owner: '',
      user_organizedRoleId: '',
    };
  },

  mounted() {
    this.user_organizedRoleId = localStorage.getItem('user_roleId');
    this.user_owner = localStorage.getItem('user_owner');
  },

  methods: {
    joinHandle() {
      this.dialogShow = false;
      this.$refs.OrganizationJoin.options = this.tableData;
      setTimeout(() => {
        this.$refs.OrganizationJoin.isJoin = true;
        this.$refs.OrganizationJoin.dialogShow = true;
      }, 500);
    },
    createHandle() {
      this.dialogShow = false;
      this.$refs.OrganizationJoin.options = this.tableData;
      setTimeout(() => {
        this.$refs.OrganizationJoin.isJoin = false;
        this.$refs.OrganizationJoin.dialogShow = true;
      }, 500);
    },
    getList() {
      this.$emit('getList');
    },
  },
};
</script>

<style lang="scss" scoped>
.type_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 100px 0;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;

    span {
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: #333333;
      margin-bottom: 25px;
    }
  }
}
</style>
